<template>
  <!-- fixed app-->
  <div class="app_img_frame">
    <Dropdown style="margin-left: 20px" @on-click="handleMenuClick" @on-visible-change="renderMenu" :placement="'top'" >
      <el-image :src="app.img" :class="itemClass" @click="handleClick" draggable="false" ></el-image>
      <DropdownMenu slot="list">
        <!-- frame区域-->
        <div style="width: 120px;height: 120px;float: left;">
        <DropdownItem v-for="v in ItemOption.options" :key="v.value" :name="v.value">{{v.value}}</DropdownItem>
        </div>
        <div class="itemFrame" v-for="v in processes" :key="v.process_id" >
          <img :id="`img:${v.process_id}`" width="190px" height="110px"/>
        </div>
      </DropdownMenu>
    </Dropdown>

  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
export default {
  name: "Item",
  data() {
    return {
      ItemOption:{
        options:[{value:'打开新窗口'},{value:'关闭所有窗口'}]
      }
    }
  },
  props: {
    app: {
      type: Object,
      required: true
    }
  },
  mounted() {
  },
  computed: {
    ...mapState('appAbout', ['apps']),
    itemClass() {
      if (this.app.processes.num == 0) {
        return { 'el-image-hop': true, app_actived: false }
      } else {
        return { 'el-image-hop': true, app_actived: true }
      }
    },
    processes() {
      let res = new Array();
      for (let p in this.apps[this.app.app_id].processes) {
        if (p != 'num') {
          res.push(this.apps[this.app.app_id].processes[p])
        }
      }
      return res
    }
  },
  methods: {
    ...mapActions('appAbout', ['openApp']),
    ...mapMutations('appAbout', ['CLOSEALLFRAMES']),
    handleClick() {
      // console.log(this.app.processes)
      if (this.app.processes.num == 0) {
        this.openApp(this.app.app_id)
      }
    },
    handleMenuClick(v) {
      switch (v) {
        case 1:
          this.openApp(this.app.app_id)
          break
        case 2:
          this.CLOSEALLFRAMES(this.app.app_id)
        default:
        // noting appear
      }
    },
    renderMenu(visiable){
     if(visiable){
      // 渲染img
     // this.$refs.preframe.style.display='none'
      this.processes.forEach(e=>{
        this.$pubsub.publish(`${e.process_id}:shortcut`)
      })
     }
    }
  },
};
</script>

<style scoped lang="less">
.el-image-hop {
  width: 100%;
  height: 100%;
}

.el-image-hop:hover {
  opacity: 0.8;
}

.app_actived:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  right: 0;
  height: 2px;
  width: 100%;
  background-color: #ccc;
}

/deep/.ivu-dropdown {
  height: 100%;
}

.app_img_frame {
  height: 100%
}

/deep/.ivu-dropdown-rel {
  
  height: 100%;
  width: 100%
}

.itemFrame {
  border: 3px solid white;
  width: 200px;
  height: 120px;
  padding: 2px;
  float: left;
  margin:4px
}
.itemFrame:hover{
border: 3px solid #f56c6c;
}

</style>